<template>
  <div class="answer">
    <!-- 填空题的答案 -->
    <div
      v-if="question.QuestionTypeId === 8"
      class="answer-item"
    >
      <div class="answer-item-prompt">
        答案
      </div>
      <div class="fillblanks-right-wrapper personal-count">
        <div class="answer-prompt-text">
          正确答案：
        </div>
        <div class="question-count right-answer">
          {{ question.RightAnswer }}
        </div>
      </div>
      <div class="fillblanks-right-wrapper">
        <div class="answer-prompt-text">
          您的答案：
        </div>
        <div
          class="fillblanks-your-answer"
          :class="'fillblanks-your-answer' + question.IsRight"
        >
          {{ abcdAnswer || '本题未作答' }}
        </div>
      </div>
    </div>
    <!-- 除填空题外的选择题的答案 -->
    <div
      v-else
      class="answer-item"
    >
      <div class="answer-item-prompt">
        答案
      </div>
      <span class="answer-prompt-text">
        正确答案：
      </span>
      <span class="right-answer">
        {{ rightAnswer !== '无' ? rightAnswer : question.RightAnswerStr }}
      </span>，
      <span v-if="question.IsRight !== 0">
        您的答案：
      </span>
      <span
        :class="'your-answer' + question.IsRight"
        class="your-answer"
      >
        {{ abcdAnswer || '本题未作答' }}
      </span>
    </div>
    <div class="answer-item">
      <div class="answer-item-prompt">
        试题解析
      </div>
      <VHtml
        tag="span"
        class="answer-c analysis-info"
        :html="question.Analysis || '暂无解析'"
      />
    </div>
    <!-- <div class="answer-item">
      <div class="answer-item-prompt">
        知识点：
        <span
          v-if="question.PointList && question.PointList.length === 0"
          class="answer-c no-point"
        >
          暂无知识点
        </span>
      </div>
      <ul
        v-if="question.PointList && question.PointList.length > 0"
        class="answer-c analysis-info knowledge-ul"
      >
        <li
          v-for="(point, index) in question.PointList"
          :key="index"
          class="answer-point"
        >
          <span class="circle-text">
            {{ point }}
          </span>
        </li>
      </ul>
    </div>
    <div class="answer-item">
      <div class="answer-item-prompt">
        难度：
        <span class="answer-c">
          {{ difficultyNames[question.Difficulty] }}
        </span>
      </div>
    </div>
    <div
      v-if="$store.state.userInfo.UserId !== '-1'"
      class="answer-item"
    >
      <div class="answer-item-prompt">
        统计
      </div>
      <div class="personal-count">
        个人统计：
        <span class="answer-c">
          作答本题
          {{ question.UserAllCount }}
          次，做错
          {{ question.UserErrorCount }}
          次
        </span>
      </div>
      <div>
        全站统计：
        <span class="answer-c question-count">
          本题共被作答
          {{ question.AllCount }}
          次，正确率为
          {{
            question.AllCount > 0 ?
              parseInt((1- question.ErrorCount / question.AllCount)*100) : 0
          }}%
          <template v-if="question.AllStatistics">
            ，易错项为
            {{ question.AllStatistics }}
          </template>
        </span>
      </div>
    </div> -->
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  props: {
    question: {
      type: Object,
      default: () => ({}),
    },
    abcdAnswer: {
      type: String,
      default: '',
    },
    rightAnswer: {
      type: String,
      default: '无',
    },
  },
  data () {
    return {
      difficultyNames: ['无', '简单', '一般', '困难'],
      userId: this.$store.state.userInfo.UserId,
    }
  },
})
</script>

<style lang="scss" scoped>

.answer {
  padding: 18px 0;
  text-align: left;
}
.answer-item {
  color: #666;
  font-size: 32px;
  margin-bottom: 30px;
}
.answer-item-prompt {
  font-size: 32px;
  color: #9A9A9A;
  margin-bottom: 20px;
}
.no-point {
  color: #666;
  display: inline-block;
}
.personal-count {
  margin-bottom: 20px;
}
.answer-prompt-text {
  color: #666;
}
.fillblanks-right-wrapper {
  display: flex;
  justify-content: flex-start;
}
.fillblanks-your-answer {
  display: inline-block;
  width: calc(100% - 180px);
  vertical-align: top;
}
.fillblanks-your-answer1 {
  display: inline-block;
  width: calc(100% - 180px);
  vertical-align: top;
  @include themeColor(color);
}
.fillblanks-your-answer2 {
  display: inline-block;
  width: calc(100% - 180px);
  vertical-align: top;
  @include themeColor(width, color);
}
.fillblanks-your-answer3 {
  display: inline-block;
  width: calc(100% - 180px);
  vertical-align: top;
  color: #666;
}
.right-answer, .your-answer1 {
  @include themeColor(color);
}
.your-answer2,.answer-em {
  @include themeColor(width, color);
}
.your-answer3,.answer-c {
  color: #666;
}
.question-count {
  display: inline-block;
  width: calc(100% - 180px);
  vertical-align: top;
}
.analysis-info {
  display: inline-block;
  vertical-align: text-top;
  word-wrap: break-word;
  word-break: break-all;
  width: 100%;
  /deep/ img {
    display: block;
    max-width: 100%;
    margin: 30px 0 20px;
  }
  /deep/ table {
    width: 100%;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      border-color: #ddd;
      border-width: 2px;
      border-style: solid;
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
}
.answer-pics {
  margin-left: 70px;
  margin-top: 10px;
}
.answer-pic {
  max-width: 100%;
}
.knowledge-ul {
  display: inline-block;
  vertical-align: text-top;
}
.answer-point {
  // margin-bottom: 15px;
  color: #63A2ED;
  font-size: 40px;
  list-style: disc;
  margin-left: 40px;
}
.circle-text {
  color: #666;
  font-size: 30px;
  word-break: break-all;
}
</style>
